<template>
  <div class="log_list">
    <a-card :bordered="false" class="query_card">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row>
            <a-col :xs="24" :sm="24" :md="12" :lg="8" :xxl="6">
              <a-form-item label="起始时间">
                <a-date-picker
                  v-model="date.start"
                  @change="onStartDateChange"
                  :show-time="{ defaultValue: this.moment('00:00:00', 'HH:mm:ss') }"
                />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :lg="8" :xxl="6">
              <a-form-item label="结束时间">
                <a-date-picker
                  v-model="date.end"
                  @change="onEndDateChange"
                  :show-time="{ defaultValue: this.moment('00:00:00', 'HH:mm:ss') }"
                />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :lg="8" :xxl="6">
              <a-form-item label="用户名" >
                <a-input style="width: 200px" placeholder="请输入..." v-model="queryParams.username" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :lg="8" :xxl="6">
              <a-form-item label="操作">
                <a-input style="width: 200px" placeholder="请输入..." v-model="queryParams.action" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :lg="8" :xxl="6">
              <a-form-item label="功能分类">
                <a-input style="width: 200px" placeholder="请输入..." v-model="queryParams.category" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :lg="8" :xxl="6" >
              <a-form-item label="内容">
                <a-input style="width: 200px" placeholder="请输入..." v-model="queryParams.content" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :lg="8" :xxl="6" >
              <a-form-item label="IP地址">
                <a-input style="width: 200px" placeholder="请输入..." v-model="queryParams.ipAddress" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="12" :lg="8" :xxl="6" >
              <a-form-item label="设备信息">
                <a-input style="width: 200px" placeholder="请输入..." v-model="queryParams.userAgent" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-button type="primary" @click="onSearch">查询</a-button>
            <a-button style="margin-left: 8px" @click="() => {this.queryParams = {};this.date.start = this.date.end = null}">重置</a-button>
          </a-row>
        </a-form>
      </div>
    </a-card>

    <a-card style="margin-top: 5px">
      <div class="log_title">
        <span>日志记录</span>
      </div>
      <!-- 表格 -->
      <a-table
        :columns="columns"
        :data-source="auditLogList"
        :pagination="paginationConfig"
        :loading="table_loading"
        @change="onPaginationChange"
        :scroll="{x: true}"
        rowKey="id"
        style="margin-top:24px;"
      >
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'
import { isEmptyString } from '@/utils/util'

const columns = [
  {
    title: '时间',
    dataIndex: 'createdAt',
    width: 200,
    sorter: true
  },
  {
    title: '用户名',
    dataIndex: 'username',
    width: 120,
    sorter: true
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 100,
    sorter: true
  },
  {
    title: '功能分类',
    dataIndex: 'category',
    width: 120,
    sorter: true
  },
  {
    title: '内容',
    dataIndex: 'content',
    width: 350,
  },
  {
    title: 'IP地址',
    dataIndex: 'ipAddress',
    width: 150,
  },
  {
    title: '设备信息',
    dataIndex: 'userAgent',
    width: 300,
  },
]
export default {
  name: "AuditLog",
  data () {
    return {
      columns,
      date: {
        start: null,
        end: null
      },
      table_loading: false,
      queryParams: {},
    }
  },
  computed: {
    ...mapState('auditLogManage', ['auditLogList', 'paginationConfig'])
  },
  methods: {
    ...mapMutations('auditLogManage', ['SET_LOG_LIST', 'SET_CURRENT', 'SET_PAGE', 'SET_ORDER']),
    ...mapActions('auditLogManage', ['getAuditLogList']),
    loadAuditLogList () {
      this.table_loading = true;
      console.log(this.queryParams)
      const params = { ...this.queryParams }
      this.getAuditLogList(params)
        .then()
        .catch(err =>{
          this.$message.error('获取审计日志列表失败，原因：' + err.msg + '！')
        })
        .finally(() =>{
          this.table_loading = false;
        })
    },
    onStartDateChange (date,dateString) {
      this.queryParams.start = dateString
    },
    onEndDateChange (date,dateString) {
      this.queryParams.end = dateString
    },
    onSearch (){
      this.SET_CURRENT(1)
      this.loadAuditLogList()
    },
    order_way (order) {
      if (order === 'ascend') {
        return 'asc'
      } else if(order === 'descend') {
        return 'desc'
      } else {
        return ''
      }
    },
    onPaginationChange (page, filters, {field, order}) {
      this.queryParams.orderBy = isEmptyString(field) ? 'createdAt' : field
      this.queryParams.order = isEmptyString(order) ? 'desc' : this.order_way(order)
      this.SET_CURRENT(page.current)
      this.SET_PAGE(page.pageSize)
      this.loadAuditLogList()
    },
  },
  mounted() {
    this.loadAuditLogList()
  }
}
</script>

<style scoped>
.log_list{
  width: 100%;
  height: 100%;
}

.log_title{
  display: flex;
  justify-content: space-between;
}


.log_title span {
  display: block;
  float: left;
  margin-bottom: 0;
  padding-right: 12px;
  color: rgba(0,0,0,.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 32px;
}
</style>
